<template>
	<view class="task-list">
		<block v-for="item in list" :key="item.id">
			<view class="task-list-item">
				<view class="title">
					<view class="time">领取时间: {{item.receive_time}}</view>
					<view class="status">{{item.status | status}}</view>
				</view>
				<view class="content">
					<view class="image-box">
						<u-image
							class="image" 
							width="180rpx" 
							height="180rpx" 
							:src="item.url"></u-image>
					</view>
					<view class="info">
						<view class="name u-font-lg">{{item.title}}</view>
						<view class="brand">
							<u-image
								class="icon"
								width="40rpx" 
								height="40rpx"
								src="/static/icons/brand_icon.png"></u-image>
							<view class="text">品牌名称: {{item.brand_name}}</view>
						</view>
						<view class="fans">
							<u-image
								class="icon"
								width="40rpx" 
								height="40rpx"
								src="/static/icons/fans_icon.png"></u-image>
							<view class="text">粉丝要求: {{item.fans_ask}}</view>
						</view>
					</view>
				</view>
				<view class="btns" v-if="item.status == 5 || item.status == 2">
					<ABtn
						v-if="item.status == 5"
						btnWidth="170" 
						btnHeight="64"
						borderRadius="64"
						borderWidth="1"
						borderColor="#e1e1e1"
						btnBgColor="#ffffff"
						btnColor="#999999"
						btnHoverClass="btn-hover-class"
						btnText="查看原因"
						@click="handleReason(item)" />
					<ABtn
						btnWidth="170" 
						btnHeight="64"
						borderRadius="64"
						borderWidth="1"
						borderColor="#e1e1e1"
						btnBgColor="#ffffff"
						btnColor="#999999"
						btnHoverClass="btn-hover-class"
						btnText="取消任务"
						@click="handleCancel(item)" />
					<ABtn
						btnWidth="170" 
						btnHeight="64"
						borderRadius="64"
						btnHoverClass="btn-hover-class"
						btnText="完成任务"
						@click="handleFinish(item)" />
				</view>
			</view>
		</block>
	</view>
</template>

<script>
import ABtn from '@/components/a-btn/index.vue'
export default {
	components: {
		ABtn
	},
	props: {
		list: {
			type: Array,
			default() {
				return []
			}
		}
	},
	filters: {
		status(item) {
			let str = ''
			if(item) {
				switch(item) {
					case 1:
						str = '审核中'
						break
					case 2:
						str = '进行中'
						break
					case 3:
						str = '已完成'
						break
					case 4:
						str = '已取消'
						break
					case 5:
						str = '已拒绝'
						break
				}
			}
			return str
		}
	},
	methods: {
		handleReason(item) {
			this.$emit('handleReason', item)
		},
		handleCancel(item) {
			this.$emit('handleCancel', item)
		},
		handleFinish(item) {
			this.$emit('handleFinish', item)
		}
	},
	options: { styleIsolation: 'shared' }
}
</script>

<style lang="scss" scoped>
.task-list {
	&-item {
		background-color: $u-bg-white-color;
		margin-bottom: 20rpx;
		color: $u-text-color;
		.title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 88rpx;
			border-bottom: 1rpx solid $u-border-light-grey-color;
			padding: 0 25rpx;
			.status {
				color: $u-text-light-color;
			}
		}
		.content {
			display: flex;
			padding: 25rpx;
			.image-box {
				width: 180rpx;
				height: 180rpx;
				border-radius: 10rpx;
				overflow: hidden;
				margin-right: 20rpx;
			}
			.info {
				display: flex;
				flex-direction: column;
				flex: 1;
				justify-content: space-between;
				.name {
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					display: -moz-box;
					-moz-line-clamp: 2;
					-moz-box-orient: vertical;
					word-wrap: break-word;
					word-break: break-all;
					white-space: normal;
					line-height: 36rpx;
					font-weight: 600;
				}
				.brand, .fans {
					display: flex;
					align-items: center;
					.icon {
						margin-right: 12rpx;
					}
				}
			}
		}
		.btns {
			display: flex;
			justify-content: flex-end;
			padding: 0 25rpx 25rpx;
			/deep/ .btn {
				margin-left: 20rpx;
			}
		}
	}
}
</style>
